<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">项目企业名称:</div>
        <div class="input-item">
          <a-input v-model="queryParam.projectCompanyName" :maxLength="30" clearable placeholder="请填写项目企业名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">选择类型:</div>
        <div class="input-item">
          <a-select ref="select" v-model="queryParam.projectCompanyType" placeholder="请选择">
            <a-select-option v-for="(item, index) in project_company_type" :key="index" :value="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">安全负责人:</div>
        <div class="input-item">
          <a-input v-model="queryParam.projectUserName" :maxLength="30" clearable placeholder="请填写" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">联系电话:</div>
        <div class="input-item">
          <a-input v-model="queryParam.projectUserMobile" :maxLength="30" clearable placeholder="请填写" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">包联领导:</div>
        <div class="input-item">
          <a-input v-model="queryParam.leaderName" :maxLength="30" clearable placeholder="请填写姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">包联警员:</div>
        <div class="input-item">
          <a-input v-model="queryParam.policeUserName" :maxLength="30" clearable placeholder="请填写姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">创建时间:</div>
        <div class="time-item">
          <start-end-time
            :resetTime="resetTime"
            :showTime="{ format: 'HH:mm:ss' }"
            :times="times"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
          ></start-end-time>
        </div>
      </div>

      <div class="btn-wrap">
        <a-button class="searchBtn" type="primary" @click="searchQuery(queryParam.startTime, queryParam.endTime)">
          搜索
        </a-button>
        <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        class="tableList"
        rowKey="id"
        @change="handleTableChange"
      >
        <template #projectCompanyType="record">
          <span> {{ get_dict_type(project_company_type, record.projectCompanyType) }}</span>
        </template>
        <template v-slot:action="records">
          <span class="operation deatil-color" @click="detailHandle(records)">详情 </span>
          <span class="operation deatil-color" @click="handelAdd(records)">编辑 </span>
          <span class="operation warnColor" @click="showDelete(records)">删除 </span>
        </template>

        <template #createTime="record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ $moment(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
            <span> {{ $moment(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </a-tooltip>
        </template>
      </a-table>
    </div>

    <detailModal ref="detailModal" />
    <addModal ref="addModal" @refresh="searchQuery" />
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import { ajaxGetDictItems } from '@/api/api'
import detailModal from './modules/detailModal'
import addModal from './modules/addModal'
import allMessage from '@/components/allMessage'
import { getAction, deleteAction } from '@/api/manage'
export default {
  name: 'visitor-alreadyVisited',
  components: { startEndTime, detailModal, addModal, allMessage },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId: {
      handler(v) {
        this.queryParam.policeAgencyId = v.id ? v.id : ''
        this.searchQuery()
      },
    },
  },
  data() {
    return {
      url: {
        list: '/common/project_company/page',
        tree: true,
      },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '项目企业名称',
          dataIndex: 'projectCompanyName',
          ellipsis: true,
          width: 300,
          align: 'center',
        },
        {
          title: '类型',
          // dataIndex: 'clueType',
          scopedSlots: { customRender: 'projectCompanyType' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '安全负责人',
          dataIndex: 'projectUserName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'projectUserMobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '包联领导(A角)',
          dataIndex: 'leaderOneName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '包联领导(B角)',
          dataIndex: 'leaderTwoName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '包联警员',
          dataIndex: 'policeUserNames',
          // scopedSlots: { customRender: 'policeUserNames' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '创建时间',
          scopedSlots: { customRender: 'createTime' },
          // dataIndex: 'createTime',
          width: 200,
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: 200,
          align: 'center',
        },
      ],
      disableMixinCreated: true,
      project_company_type: [], // 线索类型
    }
  },
  mounted() {
    this.getDist()
  },
  methods: {
    async getDist() {
      let { result: project_company_type } = await ajaxGetDictItems({ code: 'project_company_type' })
      this.project_company_type = project_company_type
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.startTime = null
        }
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
        if (v == null) {
          this.queryParam.endTime = null
        }
      }
    },
    detailHandle(records) {
      this.$refs.detailModal.show(records, 0, 1, 1)
    },
    handelAdd(record) {
      this.$refs.addModal.show(record)
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    async tipMessage(records) {
      let res = await deleteAction('/common/project_company/delete', { id: records.id })
      this.$message.success(res.message)
      this.publicVisible = false
      this.searchQuery()
    },
  },
}
</script>

<style lang="less" scoped>
.add-btn {
  width: 160px;
  height: 40px;
  background: #1388ff;
  border-radius: 8px 8px 8px 8px;
  border: 0.01rem solid var(--theme-input-border);
  line-height: 40px;
  transform: translateY(-140%);

  font-weight: bold;
  font-size: 16px;
  color: #0e2b48;
}
</style>
